{extend name="base" /}
{block name="title"}后台管理-用户管理{/block}
{block name="main"}
<div class="widget-body">
    <div class="span6">
        <div id="users_length" class="dataTables_length">
            <label>Entries:
                <select size="1" name="users_length" aria-controls="users">
                    <option value="1" selected="selected">1</option>
                    <option value="2">2</option>
                    <option value="5">5</option>
                    <option value="10">10</option>
                </select>
            </label>
        </div>
    </div>
    <div class="span6">
        <div class="dataTables_filter" id="users_filter">
            <label>Search:
                <input type="text" aria-controls="users" name="Search">
            </label>
        </div>
    </div>
    <table id="user" class="table table-striped table-bordered dataTable">
        <thead>
            <tr>
                <th>昵称</th>
                <th>学号</th>
                <th>电话</th>
                <th>学校</th>
                <th>状态</th>
                <th></th>
            </tr>
        </thead>
        <tbody class="userlist">
            {volist name="usersa" id="vo"}
            <tr>
                <td>{$vo.name}</td>
                <td>{$vo.sNumber}</td>
                <td>{$vo.teleNumber}</td>
                <td>{$vo.schoolName}</td>
                <td>
                    {if condition="$vo.status == 0"}
                    <span class="label label-success slabel" data-uid="{$vo.userId}" data-status='0'>正常</span>
                    {else/}
                    <span class="label slabel" data-uid="{$vo.userId}" data-status='1'>禁用</span>
                    {/if}
                </td>
                <td>
                    <div class="btn-group">
                        <a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#">
                            操作
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu pull-right">
                            <li><a href="{:url('resetpw',['uid'=>$vo.userId])}"><i class="icon-wrench"></i> 重置密码</a>
                            </li>
                            <li><a href="{:url('edituser',['uid'=>$vo.userId])}"><i class="icon-edit"></i> 修改</a></li>
                            <li><a href="{:url('deluser',['uid'=>$vo.userId])}"><i class="icon-trash"></i> 删除</a></li>
                        </ul>
                    </div>
                </td>
            </tr>
            {/volist}
        </tbody>
    </table>
    <div class="dataTables_paginate paging_bootstrap pagination">
        <ul name="pagelist" pagenum="{$all}">
            {for start="1" end="$all+1"}
            <li name="page">
                <a href="#" page="{$i}">{$i}</a>
            </li>
            {/for}
        </ul>
    </div>
</div> <!-- /widget-body -->
<script src="__STATIC__/assets/js/jquery.min.js"></script>
<script>
    function search(){
    $("[name='Search']").on("change", function () {
        console.log($(this).val());
        let key = $(this).val();
        let length = $("[name = 'users_length']").val();
        location.href = "{:url('User/search')}?key="+key;
    });
    }

    search();
    $("[name='Search']").on("focus", function () {
        $("[name = 'pagelist']").hide();
    });
    $("[name='Search']").on("blur", function () {
        $(this).val("");
        $("[name = 'pagelist']").show();
    });
    $("[name = 'users_length']").on("change", function () {
        console.log($(this).val());
        const length = $(this).val();
        $("[name = 'pagelist']").empty();
        for (let i = 0; i < Math.ceil($("[name = 'pagelist']").attr("pagenum") / length); i++) {
            var newli = document.createElement('li');
            var p = `<li name="page">
                        <a href="#" page="${i+1}">${i+1}</a>
                    </li>`;
            newli = p;
            $("[name = 'pagelist']").append(newli);
        };
        clicka();
        $.ajax({
            type: 'post',
            url: "{:url('User/limit')}",
            data: {
                "lenth": length
            },
            success: function (data) {
                let json = JSON.parse(data);
                // console.log(json);
                $('.userlist').empty();
                for (let index = 0; index < json.length; index++) {
                    const element = json[index];
                    var newb = document.createElement('tr');
                    var b = `                
                            <td>${element.name}</td>
                            <td>${element.sNumber}</td>
                            <td>${element.teleNumber}</td>
                            <td>${element.schoolName}</td>
                            <td>
                                <span class="label label-success slabel" data-uid="${element.userId}" data-status='0'>正常</span>
                            </td>
                            <td>
                                <div class="btn-group">
                                    <a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#">
                                        操作
                                        <span class="caret"></span>
                                    </a>
                                    <ul class="dropdown-menu pull-right">
                                        <li><a href="resetpw?uid=${element.userId}"><i class="icon-wrench"></i> 重置密码</a>
                                        </li>
                                        <li><a href="edituser?uid=${element.userId}"><i class="icon-edit"></i> 修改</a></li>
                                        <li><a href="deluser?uid=${element.userId}"><i class="icon-trash"></i> 删除</a></li>
                                    </ul>
                                </div>
                            </td>`;
                    newb.innerHTML = b;
                    $('.userlist').append(newb);
                }
            },
            error: function (error) {
                console.log(error);
            }
        });

    })

    clicka();

    function clicka() {
        $("a[page]").on('click', function () {
            console.log($(this).attr("page"));
            let clickPage = $(this).attr("page");
            let length = $("[name = 'users_length']").val();
            $.ajax({
                type: 'post',
                url: "{:url('User/pageselector')}",
                data: {
                    "page": clickPage,
                    "lenth": length,
                },
                success: function (data) {
                    let json = JSON.parse(data);
                    // console.log(json);
                    $('.userlist').empty();
                    for (let index = 0; index < json.length; index++) {
                        const element = json[index];
                        var newb = document.createElement('tr');
                        var b = `                
                            <td>${element.name}</td>
                            <td>${element.sNumber}</td>
                            <td>${element.teleNumber}</td>
                            <td>${element.schoolName}</td>
                            <td>
                                <span class="label label-success slabel" data-uid="${element.userId}" data-status='0'>正常</span>
                            </td>
                            <td>
                                <div class="btn-group">
                                    <a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#">
                                        操作
                                        <span class="caret"></span>
                                    </a>
                                    <ul class="dropdown-menu pull-right">
                                        <li><a href="resetpw?uid=${element.userId}"><i class="icon-wrench"></i> 重置密码</a>
                                        </li>
                                        <li><a href="edituser?uid=${element.userId}"><i class="icon-edit"></i> 修改</a></li>
                                        <li><a href="deluser?uid=${element.userId}"><i class="icon-trash"></i> 删除</a></li>
                                    </ul>
                                </div>
                            </td>`;
                        newb.innerHTML = b;
                        $('.userlist').append(newb);
                    }
                }
            })
        })
    }
</script>
{/block}
